import Fetch from "../../../utils/fetch";
import api from "@/api/navigation.js";
import { appendSlotToTree } from "../../../utils/antd";
import MenuUtil from "./utils/Menu";

const state = {
    /** 左侧主导航菜单 */
    navMenu: null,
    /** 菜单管理-导航树 */
    navTree: null,
    /** 左侧第三方应用列表 */
    extAppList: null,
    /** 右上角菜单 */
    rightTopMenus: [
        { title: "portal.setting.menu", path: "/main/navigation", isAuthorized: false },
        { title: "portal.setting.custom", path: "/main/custom/customIndex", isAuthorized: false },
        { title: "portal.setting.widget", path: "/main/widget", isAuthorized: false },
        { title: "portal.layout.manage", path: "/main/layoutManage", isAuthorized: false },
    ],
    collapsed: false,
    openTreeKeys: [],
    selectedTreekeys: [],
};

// ^^^^^^^^^^异步操作^^^^^^^^^^
const actions = {
    //获取导航树
    getNavTree({ commit }, query) {
        return new Promise(resolve => {
            Fetch(api.API_NAV_TREE, {
                method: "get",
            }).then(res => {
                resolve(res);
                commit("MU_NAV_TREE", { data: res.data, hasRootNode: query.hasRootNode });
            });
        });
    },
    //获取第三方应用列表
    getExtAppList({ commit }) {
        Fetch(api.API_NAV_EXT_APP, {
            method: "get",
        }).then(res => {
            commit("MU_NAV_EXT_APP", res);
        });
    },
};

// ^^^^^^^^^^同步操作^^^^^^^^^^
const mutations = {
    MU_NAV_EXT_APP(state, payload) {
        state.extAppList = payload.data;
    },
    MU_NAV_TREE(state, payload) {
        if (payload.hasRootNode) {
            let slotsData = appendSlotToTree(payload.data);
            let root = [
                {
                    children: slotsData,
                    key: "-1",
                    parentId: "-1",
                    title: "导航菜单树",
                    value: "-1",
                },
            ];
            state.navTree = root;
        } else {
            state.navMenu = payload.data;
            MenuUtil.findRightTopMenu(state.navMenu, state.rightTopMenus);
        }
    },
    MU_COLLAPSED_MENU(state, payload) {
        state.collapsed = payload;
    },

    MU_OPENTREE_KEYS(state, payload) {
        state.openTreeKeys = payload;
    },

    MU_SELECTED_KEYS(state, payload) {
        state.selectedTreekeys = payload;
    },

    foldMenuItem(state, payload) {
        state.openTreeKeys.splice(
            state.openTreeKeys.findIndex(item => item === payload),
            1,
        );
    },
    toggleMenuItem(state, payload) {
        if (state.openTreeKeys.includes(payload)) {
            state.openTreeKeys.splice(
                state.openTreeKeys.findIndex(item => item === payload),
                1,
            );
        } else {
            state.selectedTreekeys = [payload];
            state.openTreeKeys = [...new Set([...state.openTreeKeys, ...[payload]])];
        }
    },
    expandMenuItem(state, payload) {
        //合并数组并去重
        state.selectedTreekeys = [payload];
        state.openTreeKeys = [...new Set([...state.openTreeKeys, ...[payload]])];
    },
    setSelectedMenuItem(state, payload) {
        state.selectedTreekeys.shift();
        state.selectedTreekeys.push(payload);
        console.log("payload", state.selectedTreekeys);
    },
    setOpenedMenuItem(state, payload) {
        let relatedItems = MenuUtil.findNavToOpenKeys(state.navMenu, payload);
        //合并数组并去重
        state.selectedTreekeys.shift();
        state.selectedTreekeys.push(relatedItems.selectedKeys);
        state.openTreeKeys = [...new Set([...state.openTreeKeys, ...relatedItems.openedKeys])];
    },
};

// ^^^^^^^^^^数据过滤^^^^^^^^^^
const getters = {
    //按ID查询图元
    //findShape: state => id => {
    //    return state.shapesDatas.find(shape => shape.id === id);
    //},
};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations,
};
